<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
   <meta charset="utf-8" />
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>BootMetro</title>

   <meta name="robots" content="index, nofollow">
   <meta name="description" content="MetroUI-Web : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
   <meta name="keywords" content="metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
   <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
   
   <!-- remove or comment this line if you want to use the local fonts -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
   <link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="content/css/icomoon.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="content/css/demo.css">
   <link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="content/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="scripts/modernizr-2.6.1.min.js"></script>

   <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3182578-6']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
   </script>
</head>

<body data-accent="blue">
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

   <!--
   <div id="hero" class="container-fluid" xmlns="http://www.w3.org/1999/html">
      <div class="row-fluid">
   
         <header class="jumbotron masthead">
            <div class="inner span5">
               <h1>BootMetro</h1>
               <h2>Metro style web framework</h2>
               <p>Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 MetroUI" style, without the need to run on Windows 8.</p>
               <p>
                  <a href="https://github.com/aozora/bootmetro/zipball/master" class="btn btn-large btn-primary btn-success">
                     Download Now <small>it's free</small>
                     <b class="icon-arrow-right-7"></b>
                  </a>
                  <br/>
                  <span class="label label-success">Latest version: 0.6</span>
               </p>
            </div>
            <div class="span7">
               <img id="hero-image" class="pull-right" width="500" height="265" src="content/img/hero4.png" alt="hero">
            </div>
         </header>
   
      </div>
   </div>
   -->
   <header id="hero" class="">
   
         <div class="jumbotron masthead">
            <div class="container-fluid">
               <div class="row-fluid">
                  <div class="inner span5">
                     <h1>BootMetro</h1>
                     <h2>Metro style web framework</h2>
                     <p>Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 App Store" style, without the need to run on Windows 8.</p>
                     <p>
                        <a class="btn btn-large btn-primary" href="https://github.com/aozora/bootmetro/zipball/master">
                           Download Now
                           <i class="icon-arrow-right-7"></i>
                        </a>
                        <span>it's free</span>
                        <br/>
                        <span class="label label-success">Latest version: 0.6</span>
                     </p>
                  </div>
                  <div class="span7">
                     <img id="hero-image" class="pull-right" width="500" height="265" src="content/img/hero4.png" alt="hero">
                  </div>
               </div>
            </div>
         </div>
   
   </header>
   
   
   <div id="home-tiles" class="container-fluid metro">
      <div class="row-fluid">
         <div class="span4">
            <a class="tile wide imagetext bg-color-orange first" href="https://github.com/aozora/bootmetro">
               <div class="image-wrapper">
                  <span class="icon icon-github"/>
               </div>
               <div class="column-text">
                  <div class="text-header3">View project on GitHub</div>
               </div>
            </a>
         </div>
         <div class="span4">
            <a class="tile wide imagetext bg-color-green middle" href="./hub.html">
               <div class="image-wrapper">
                  <!--<img src="content/img/metro-tiles.jpg" alt="demo"/>-->
                  <span class="icon icon-grid-view"/>
               </div>
               <div class="column-text">
                  <div class="text-header3">View the Demo online</div>
               </div>
            </a>
         </div>
         <div class="span4">
            <a class="tile wide imagetext bg-color-blue last" href="https://twitter.com/aozoralabs">
               <div class="image-wrapper">
                  <span class="icon icon-twitter"/>
               </div>
               <div class="column-text">
                  <div class="text-header3">Follow on Twitter</div>
               </div>
            </a>
         </div>
      </div>
   </div>
   
   <div class="marketing metro container-fluid">
      <h1>Features</h1>
      <p class="marketing-byline">BootMetro is built on top of <a href="http://twitter.github.com/bootstrap/index.html">Twitter Bootstrap</a> and inspired by the Metro UI CSS by Sergey Pimenov</p>
   
      <div class="row-fluid">
         <div class="span4">
            <h2>Create your Hub</h2>
            <div class="tile wide image">
               <img src="content/img/detail-hub.png" alt="hub" />
            </div>
            <p>Give more focus to your content. With a Metro style app you give users immediately focus on the primary infos, increasing the usability and reducing the distractions.</p>
            <p>Use the same tile templates as defined for the original Windows 8 MetroUI.</p>
         </div>
         <div class="span4">
            <h2>Actions</h2>
            <div class="tile wide image">
               <img src="content/img/detail-appbar-1.png" alt="appbar" />
            </div>
            <p>Use the ApplicationBar to show contextual icon action.</p>
         </div>
         <div class="span4">
            <h2>Navigation</h2>
            <div class="tile wide image">
               <img src="content/img/detail-headermenu.png" alt="headermenu" />
            </div>
            <p>Implement the navigation in pure MetroUI style, use back-button and the header menu to provide simple ways to navigate to other pages.</p>
         </div>
      </div>
      <div class="row-fluid">
         <div class="span4">
            <h2>Charms</h2>
            <div class="tile wide image">
               <img src="content/img/detail-charms.png" alt="charms" />
            </div>
            <p>Create charms panels to show contextual settings.</p>
         </div>
         <div class="span4">
            <h2>Font Icons</h2>
            <div class="tile wide image">
               <img src="content/img/detail-icons.png" alt="icons" />
            </div>
            <p>With the awesome <a href="http://keyamoon.com/icomoon">IcoMoon</a> font icon set, you can use hundreds of font icons with any color and any dimension.</p>
         </div>
      </div>
   </div>
   
   
   
   <div id="charms" class="win-ui-dark">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-command">
               <span class="win-commandimage win-commandring">&#xe05d;</span>
            </a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-semilight">Semi-Light</option>
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='scripts/jquery-1.8.2.min.js'>\x3C/script>")</script>

   <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="scripts/jquery.scrollTo.js"></script>
   <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="scripts/bootmetro.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
   <script type="text/javascript" src="scripts/demo.js"></script>
   <script type="text/javascript" src="scripts/holder.js"></script>

   <script type="text/javascript">
      $(".metro").metro();
   </script>
</body>
</html>
